<template>
  <Card class="w-full">
    <template #title>
      <div class="w-full flex justify-between ml-1 mr-1">
        <span class="text-2xl">文章详情</span>
        <Button class="flex items-center" type="link" 
        @click="router.back()">
          <ArrowBigLeft/>
           返回列表
        </Button>
      </div>
    </template>
  </Card>
  <div class="flex gap-5  mt-[80px] ml-auto mr-auto">
    <div class="flex flex-col w-[100px] h-full items-center pt-[20px] gap-3">
      <div class="text-center">点赞</div>
      <div class="text-center">评论</div>
      <div class="text-center">收藏</div>
      <div class="text-center">分享</div>
      <div class="text-center">打赏</div>
    </div>
    <div class="article-container flex flex-col items-center p-2 flex-1 w-[900px]  min-h-full"
    :class="myCard">
      <h1 class="blog-title flex ml-auto mr-auto">博客标题</h1>
      <!-- 元信息（作者、日期等） -->
      <div class="blog-meta flex w-full pl-4 pr-4 justify-between">
        <div class="flex items-center gap-2">
          <span>作者：xxx</span>
          <span>发布时间：2023-10-23</span>
          <span>浏览量12,847</span>
        </div>
        <Button @click="handleEdit" type="link" class="text-blue-400">
          <SquarePen />
        </Button>
      </div>
      <!-- 内容区域（核心） -->
      <div class="blog-content">
        <!-- 安全渲染后的博客内容将插入这里 -->
      </div>
    </div>
    <div class="flex flex-col items-center w-[300px] gap-5">
      <div class="flex flex-col w-full p-2 items-center gap-3"
      :class="myCard">
        <div class="flex items-center w-full h-[50px] gap-2">
          <Avatar></Avatar>
          <div class="flex flex-col p-2 gap-1">
            <div>渣渣辉</div>
            <span>资深开发工程师</span>
          </div>
        </div>
        <div class="flex w-full justify-around">
          <div>
            <span>32</span>
            <p>文章</p>
          </div>
          <div>
            <span>245K</span>
            <p>阅读</p>
          </div>
          <div>
            <span>18K</span>
            <p>粉丝</p>
          </div>
        </div>
        <Button :style="{width:'100%'}">
          关注作者
        </Button>
      </div>
      <div class="w-full p-2"
      :class="myCard">
        文章目录
      </div>
      <div class="w-full p-2"
      :class="myCard">
        <div>
          <img src="" alt="">
          <div>
            <h4>未来城市</h4>
            <p>智慧城市的建设关键技术...</p>
          </div>
        </div>
        <div>
          <img src="" alt="">
          <div>
            <h4>未来城市</h4>
            <p>智慧城市的建设关键技术...</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer class="w-full h-[250px] bg-gray-400 mt-[20px]">
    版权说明...
  </footer>
</template>
<script lang="ts" setup>
import {Button ,Avatar ,Card,} from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import { myCard } from '@/const/style';
import { useRouter } from 'vue-router';
import { ArrowBigLeft,SquarePen } from 'lucide-vue-next';

const router = useRouter()

const handleEdit = () => {
  // 跳转并传递文章id
  router.push('/article/edit')
}
</script>
<style lang="less">
  
</style>